<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="./css/bootstrap.min.css" />
  <style>
    .form-select {
      width: 103px;
      display: inline-block;
    }

    .col-form-label {
      text-align: right;
    }

    .figure-img {
      width: 100px;
      height: 100px;
      cursor: pointer;
    }

    #upload {
      display: none;
    }
  </style>
</head>

<body>
  <div class="container">
    <h1 class="p-5">个人设置</h1>
    <form class="col-4">
      <div class="row mb-3">
        <label class="col-form-label col-3">昵称：</label>
        <div class="col-9">
          <input class="form-control col-9" type="text" name="nickname" />
        </div>
      </div>
      <div class="row mb-3">
        <label class="col-form-label col-3">籍贯：</label>
        <div class="col-9">
          <select class="form-select col-4" name="province">
            <option value="">--省--</option>
          </select>
          <select class="form-select col-4" name="city">
            <option value="">--市--</option>
          </select>
          <select class="form-select col-4" name="area">
            <option value="">--区--</option>
          </select>
        </div>
      </div>
      <div class="row mb-3">
        <label class="col-form-label col-3">头像：</label>
        <div class="col-9">
          <input class="form-control col-9" type="hidden" name="avatar" />
          <figure class="figure">
            <input type="file" id="upload" />
            <img src="https://yanxuan-item.nosdn.127.net/12a882699bd531a1bd428bffe1989525.jpg"
              class="figure-img img-fluid rounded" alt="..." id='img' />
            <figcaption class="figure-caption">修改头像</figcaption>
          </figure>
        </div>
      </div>
      <div class="row mb-3">
        <label class="col-3"></label>
        <div class="col-9">
          <button type="submit" class="btn btn-primary">保存</button>
        </div>
      </div>
    </form>
  </div>

  <script src="./lib/bootstrap.min.js"></script>
  <script src="./lib/axios.js"></script>
  <script>
    // 上传头像
    // 上传头像
    const upload = document.querySelector('#upload')
    const avatar = document.querySelector('.figure img')
    // 昵称
    const nickname = document.querySelector('[name=nickname]')
    // 省市区
    const province = document.querySelector('[name=province]')
    const city = document.querySelector('[name=city]')
    const area = document.querySelector('[name=area]')
    const figure = document.querySelector('.figure-caption')
    const form = document.querySelector('form')
    axios.defaults.baseURL = 'http://ajax-api.itheima.net'
    // 第一步省市场县联动

    xuanran()
    touxiang()
    // 1.初始省市县的数据
    async function sheng(check, citye, arear) {
      const {
        data: {
          data
        }
      } = await axios.get('/api/province')
      console.log(data)
      const content = data.map(item => `<option value="${item}">${item}</option>`).join('')
      province.innerHTML = `<option value="">--省--</option>${content}`
      province.value = check
      shi(province.value, citye)
      qu(check, citye, arear)
    }
    //2.省市县的联动
    province.addEventListener('change', function () {
      shi(province.value)
      area.innerHTML = `<option value="">--区--</option>`
      city.addEventListener('change', function () {
        qu(province.value, this.value)
      })
    })
    async function shi(sheng, check = '') {
      const {
        data: {
          data
        }
      } = await axios.get('/api/city', {
        params: {
          pname: sheng
        }
      })
      console.log(data)
      const content = data.map(item => `<option value="${item}">${item}</option>`).join('')
      city.innerHTML = `<option value="">--市--</option>${content}`
      city.value = check
    }
    async function qu(sheng, shi, check = '') {
      const {
        data: {
          data
        }
      } = await axios.get('/api/area', {
        params: {
          pname: sheng,
          cname: shi
        }
      })
      const content = data.map(item => `<option value="${item}">${item}</option>`).join('')
      area.innerHTML = `<option value="">--区--</option>${content}`
      area.value = check
    }

    // 接口文档：https://www.showdoc.com.cn/1834761734600444/8477923164668939
    // 2.头像上传
    function touxiang() {
      avatar.addEventListener('click', function () {
        upload.click()
      })
      upload.addEventListener('change', async function () {
        const file = this.files[0]
        if (!file) {
          return
        }
        const fd = new FormData()
        fd.append('avatar', file)
        const {
          data: {
            data
          }
        } = await axios.post('/api/file', fd)
        console.log(data)
        avatar.src = data.url
      })
    }
    //保存资料
    async function zhiliaoUP() {
      const data = {
        nickname: nickname.value,
        province: province.value,
        city: city.value,
        area: area.value,
        avatar: avatar.src
      }
      const res = await axios.put('/api/settings', data)
    }
    form.addEventListener('submit', function (e) {
      e.preventDefault()
      zhiliaoUP()
    })
    //页面开始渲染函数
    async function xuanran() {
      const {
        data: {
          data
        }
      } = await axios.get('/api/settings')
      nickname.value = data.nickname
      // province.value=data.province
      // city.value=data.city
      // area.value=data.area
      avatar.src = data.avatar
      sheng(data.province, data.city, data.area)
    }
  </script>
</body>

</html>